---
sidebar_position: 1
---

import {
  Typography,
  Images,
  Tables,
  Figures,
  FormOverview,
  DisabledForms,
  FormSizing,
  InputGroup,
  FloatingLabels,
  FormValidation,
  Accordion,
  Alerts,
  Badge,
  Breadcrumb,
  Buttons,
  ButtonGroup,
  Card,
  Carousel,
  Dropdowns,
  ListGroup,
  Modal,
  Navs,
  Navbar,
  Pagination,
  Popovers,
  Progress,
  Scrollspy,
  Spinners,
  Toasts,
  Tooltips,
} from '@site/docs/lib/examples/all'

# Overview

The Design library provides building blocks for creating design systems. A toolbox of consistent design elements and user-interface components, built up from a shared set of design tokens. As a starting point for theming, it's meant to be transparent with clean and generic styles.

It is a modular, embeddable, customizable library with **local styles and scripts**. Features can be loaded individually without affecting the global CSS styling. Suitable for use with WordPress plugins, frontend UI or admin screen, where there is already a global stylesheet. It can also be used as a full site theming solution when built with no CSS class prefix.

It is a Sass-first library for importing parts as needed, and using variables to customize the design tokens and component styles. Prefer to use **Sass variables, mixins, placeholders** that only produce any CSS when they're used. That can help reduce the amount of unused CSS classes and variables (custom properties).

The entire design system can be represented in JSON format for use with JavaScript/TypeScript/React, and potentially visual builders and design tools such as Figma.

The library started as a fork and complete rewrite of Bootstrap, React Bootstrap, Design Tokens CLI, with other open-source libraries and utilities.

<h2>All components</h2>

Here is an example of each component included in the library.

## Typography

<Typography />

### Images

<Images />

### Tables

<Tables />

### Figures

<Figures />

## Forms

### Overview

<FormOverview />

### DisabledForms

<DisabledForms />

### Sizing

<FormSizing />

### Input group

<InputGroup />

### Floating labels

<FloatingLabels />

### Validation

<FormValidation />

## Components

### Accordion

<Accordion />

### Alerts

<Alerts />

### Badge

<Badge />

### Breadcrumb

<Breadcrumb />

### Buttons

<Buttons />

### Button group

<ButtonGroup />

### Card

<Card />

### Carousel

<Carousel />

### Dropdowns

<Dropdowns />

### List group

<ListGroup />

### Modal

<Modal />

### Navs

<Navs />

### Navbar

<Navbar />

### Pagination

<Pagination />

### Popovers

<Popovers />

### Progress

<Progress />

### Scrollspy

<Scrollspy />

### Spinners

<Spinners />

### Toasts

<Toasts />

### Tooltips

<Tooltips />
